<template>
  <div class="platform">
    <div class="ibanner">
      <div class="loginbox">
        <h4>账号登录</h4>
        <div class="form-list clearfix">
          <div class="iconbox fl"><img src="../assets/platform/admin.png" alt=""></div>
          <div class="inputbox fl">
            <Input type="text"  v-model="account" placeholder="请输入账号"></Input>
          </div>
        </div>
        <div class="form-list" style="margin-top: 17px;">
          <div class="iconbox"><img src="../assets/platform/lock.png" alt=""></div>
          <div class="inputbox fl"></div>
          <Input type="password" v-model="psd" placeholder="请输入密码"></Input>
        </div>
      </div>
    </div>
    <div class="i-info i-info1">
      <img src="../assets/platform/title.png" alt="">
    </div>
    <ul class="clearfix">
      <li class="fl"><div class="mask"></div> </li>
      <li class="fl" @mouseover="isHover1=true" @mouseout="isHover1=false">
        <div class="iconbox"><img src="../assets/platform/icon1.png" class="animated" :class="{'wobble': isHover1}"> </div>
        <h4 class="animated" :class="{'bounceInDown': isHover1}">SKD文档下载</h4>
        <p class="animated" :class="{'bounceInDown': isHover1}"> SKD DOWNDOAD</p>
      </li>
      <li class="fl"><div class="mask"></div></li>
      <li class="fl" @mouseover="isHover2=true" @mouseout="isHover2=false">
        <div class="iconbox"><img src="../assets/platform/icon2.png" class="animated" :class="{'wobble': isHover2}"> </div>
        <h4 class="animated" :class="{'bounceInDown': isHover2}">联系我们</h4>
        <p class="animated" :class="{'bounceInDown': isHover2}">CONTACT US</p>
      </li>
      <li class="fl" @mouseover="isHover3=true" @mouseout="isHover3=false">
        <div class="iconbox"><img src="../assets/platform/icon3.png" class="animated" :class="{'wobble': isHover3}"> </div>
        <h4 class="animated" :class="{'bounceInDown': isHover3}">API文档</h4>
        <p class="animated" :class="{'bounceInDown': isHover3}">API DOCUMENTATION</p>
      </li>
      <li class="fl"><div class="mask"></div></li>
      <li class="fl" @mouseover="isHover4=true" @mouseout="isHover4=false">
        <div class="iconbox"><img src="../assets/platform/icon4.png" class="animated" :class="{'wobble': isHover4}"> </div>
        <h4 class="animated" :class="{'bounceInDown': isHover4}">帮助中心</h4>
        <p class="animated" :class="{'bounceInDown': isHover4}">HELP AND SUPPORT</p>
      </li>
      <li class="fl"><div class="mask"></div></li>
    </ul>
    <div class="i-info i-info2">
      <img src="../assets/platform/title2.png" alt="">
    </div>
  </div>
</template>
<script>

    export default {
        data () {
            return {
                isHover1:false,
                isHover2:false,
                isHover3:false,
                isHover4:false,
                account:'',
                psd:'',
                message:''
            }
        },
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @primary-color:#f39800;
  .ibanner{background: url(../assets/platform/banner.png) center;background-size: cover;}
  .loginbox{
    input[type="text"]{

    }
  }
</style>
